<template>
    <div class="list">
      <div class="title"><h3>猜你喜欢</h3></div>
      <div class="sort">
          <span :style="{fontWeight:currentIndex == index?'bold':''}" @click="handleclick(index)"  v-for="(item,index) in list" :key="index">{{item}}</span>
      </div>
      <div class="goods" v-for="(item,index) in goods" :key="index">
          <div class="imgBox">
              <img :src="item.picUrl" alt="">
          </div>
          <div class="text">
              <div class="name">{{item.name}}</div>
              <div class="count">
                  <span>★3.5</span>
                  <span>{{item.monthSalesTip}}</span>
              </div>
              <div class="price">
                  <div class="left">
                      <span>{{item.minPriceTip}}</span>
                      <span>{{item.shippingFeeTip}}<span class="delLine">￥10</span></span>
                  </div>
                  <div class="right">
                      <span>{{item.deliveryTimeTip}}</span>
                      <span>{{item.distance}}</span>
                  </div>
              </div>
          </div>
      </div>
    </div>
  </template>
  
  <script>
  import axios from "axios";
  var pic="https://img1.baidu.com/it/u=2982606892,535841361&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500";
  export default {
    name:'List',
      data() {
          return{
              currentIndex:'',
              list:['综合排序','距离最近','销量最高','筛选'],
            //   goods:[
            //       {pic,name:'金百万烤鱼',score:4.3,count:1632,start:20,farer:3,del:6,min:47, far:3.7},
            //       {pic,name:'稻香金源饺子馆',score:4.4,count:230,start:20,farer:3.5,del:4.5,min:40, far:3.0},
            //       {pic,name:'烤鸭店',score:4.2,count:290,start:20,farer:3.3,del:4.6,min:50, far:4.7},
            //   ]
            goods:[]
          }
      },
      mounted(){ 
            axios.get('/api/shop/list').then((res)=>{
            this.goods = res.data.list; 
        })
    },
      methods:{
          handleclick(index){
              this.currentIndex = index;
              if( index == 1 ){ 
                  this.goods.sort((a,b)=>{
                      return a.wmPoiScore - b.wmPoiScore;
                  })
              }
              else if( index == 2 ){ 
                  this.goods.sort((a,b)=>{
                      return b.wmPoiScore - a.wmPoiScore;
                  })
              }
          }          
      }
  }
  </script>
  
  <style lang="scss" scoped>
      h3{
          margin: 10px;
      }
      .sort{
          margin: 0 10px;
          display: flex;
          align-items: center;
          justify-content: space-between;
      }
      .goods{
          display: flex;
          margin: 10px;
          height: 100px;
      }
      .goods .imgBox{
          margin-right: 10px;
      }
      .goods .imgBox img{
          height: 80px;
      }
      .goods .text{
          margin: 0 10px;
      }
      .goods .text .name{
          font-weight: bold;
          font-size: 14px;
          margin-bottom: 5px;
      }
      .goods .text .count span{
          font-size: 14px;
          margin-right: 20px;
      }
      .goods .text .count span:nth-child(1){
          color:orangered
      }
      .goods .text .price{
          font-size: 12px;
          margin: 10px 0;
          display: flex;
          align-items: center;
          justify-content: space-between;
      }
      .goods .text .price .left{
        width:130px;
      }
      .goods .text .price .right{
        flex: 1;
      }
      .delLine{
          text-decoration:line-through;
      }
  </style>